<template>
    <div class="con">
        <header>
            <img src="../assets/images/logo.png" alt="" class="logo" onclick="return false">           
            <img src="../assets/images/txt_ChooseTheShop.png" alt="" class="chooseShop" onclick="return false">
                <select name="" v-model="city" @change="chooseCity">
                    <option v-for="item in citys" :value="item.id">{{item.title}}</option>  
                </select>
             <!-- 绳子头部定位 -->
            <div class="rope">
                <img src="../assets/images/pic_rope_top.png" alt="" onclick="return false">                
            </div> 
        </header>
        
        <!-- 木块 标题-->
        <div class="woodList">
            <div class="woods" v-for="item in store_list" @click="ok(item.id,item.title_img)">   
                  <img src="../assets/images/wood_title.png" alt="" class="wood" onclick="return false">
                  <img :src="siteImageUrl+item.title_img" alt="" class="shopTitle" onclick="return false"> 
            </div>  
    
            <div class="ropeFooter">
                <img src="../assets/images/ropeFooter.png" alt="" onclick="return false">
            </div>    
        </div>
      
      
    </div>
</template>

<script>
export default {
    name: "index",
    data() {
        return {
            citys: [],
            city: "",
            store_list: []
        };
    },
    beforeCreate() {
        document.getElementsByTagName("body")[0].className = "index";
    },
    methods: {
        chooseCity() {
            var qs = require("qs");
            this.axios({
                method: "post",
                url: `${this.siteUrl}/piaowu/api/store_list`,
                data: qs.stringify({
                    member_id: $.cookie("osc_member_id"),
                    token: $.cookie("osc_member_token"),
                    city_id: this.city
                })
            })
                .then(response => {
                    if (response.data.status == 1) {
                        this.store_list = response.data.data;
                    } else {
                        alert("请求失败：" + response.data.msg);
                    }
                })
                .catch(function(error) {
                    console.log(error);
                });
        },
        ok(id, title_img) {
           
            this.$router.push({ name: "fare", params: { id: id } });
            localStorage.setItem("title_img", title_img);
            localStorage.setItem("store_id", id);

            
        }
    },
    mounted: function() {
        var qs = require("qs");
        this.axios({
            method: "post",
            url: `${this.siteUrl}/piaowu/api/city_list`,
            data: qs.stringify({
                member_id: $.cookie("osc_member_id"),
                token: $.cookie("osc_member_token")
            })
        })
            .then(response => {
                if (response.data.status == 1) {
                    this.citys = response.data.data;
                    this.city = response.data.data[0].id;
                    // 一开始就加载上海这个城市的门店
                    var qs = require("qs");
                    this.axios({
                        method: "post",
                        url: `${this.siteUrl}/piaowu/api/store_list`,
                        data: qs.stringify({
                            member_id: $.cookie("osc_member_id"),
                            token: $.cookie("osc_member_token"),
                            city_id: this.city
                        })
                    })
                        .then(response => {
                            if (response.data.status == 1) {
                                this.store_list = response.data.data;
                            } else {
                                alert("请求失败：" + response.data.msg);
                            }
                        })
                        .catch(function(error) {
                            console.log(error);
                        });
                } else {
                    alert("请求失败：" + response.data.msg);
                }
            })
            .catch(function(error) {
                console.log(error);
            });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* .con {
  position: relative;
} */
header {
    position: relative;
}
header .logo {
    width: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 20%);
}

header .chooseShop {
    width: 80px;
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, 0%);
}
header select {
    width: 40%;
    height: 30px;
    text-indent: 10px;
    position: absolute;
    left: 50%;
    top: 72%;
    transform: translate(-50%, 0%);
    z-index: 999;
}
.rope {
    width: 100%;
    text-align: center;
}
.rope img {
    width: 100%;
}

/* 木板标题 */

.woodList .wood {
    margin-top: -10px;
}

.woodList .wood,
.woodList .woods {
    width: 100%;
    z-index: 999;
}

.woodList .woods {
    position: relative;
}

.woodList .shopTitle {
    position: absolute;
    left: 8%;
    top: -18%;
    width: 80%;
}
.woodList .ropeFooter img {
    width: 94%;
    left: 4%;
    margin-top: -20px;
    position: absolute;
}
</style>
